<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/common/taglib.jsp"%>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>消息管理平台登录${title }</title>
		<link rel="stylesheet" type="text/css" href="${ctx }/resources/plugins/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="${ctx }/resources/css/login.css" />
	</head>

	<body>
		<div class="m-login-bg">
			<div class="m-login">
				<h3>消息管理平台登录</h3>
				<div class="m-login-warp">
					<form class="layui-form" action="${ctx }/login" method="POST">
						<div class="layui-form-item">
							<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" value="admin">
						</div>
						<div class="layui-form-item">
							<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" value="q1w2e3r4">
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<input type="text" name="verity" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
								<input type="hidden" name="rememberMe" value="true">
							</div>
							<div class="layui-inline">
								<img class="verifyImg" onclick="this.src=this.src+'?c='+Math.random();" src="${ctx }/validcode?r=${random}" />
							</div>
						</div>
						<div class="layui-form-item m-login-btn">
							<div class="layui-inline">
								<button class="layui-btn layui-btn-normal" lay-submit lay-filter="login">登录</button>
							</div>
							<div class="layui-inline">
								<button type="reset" class="layui-btn layui-btn-primary">清空</button>
							</div>
						</div>
					</form>
				</div>
				<p class="copyright">Copyright 2016-2018 by 上海极和信息科技有限公司</p>
			</div>
		</div>
		<script src="${ctx }/resources/plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var errMsg = '${errMsg}';
			layui.use(['form'], function() {
				var form = layui.form(), 
					layer = layui.layer;
	
				if (errMsg != null && errMsg != ''){
					layer.alert(errMsg)
				}


				// 自定义验证规则
				form.verify({
					username: function(value) {
						if(value.length < 5) {
							return '用户名长度不能少于4位';
						}
					},
					password: [/(.+){6,12}$/, '密码必须6到12位'],
					verity: [/(.+){4}$/, '验证码必须是4位'],
				});
				
				//监听提交
				form.on('submit(login)', function(data) {
					// layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' })
					return true;
				});

			});
		</script>
	</body>
</html>